<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>
<style>
    .login-container{
           width: 30em;
            height: 30em;
            position:absolute;
            left:0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
    }
</style>
<body>

 <div class="login-container">
     <div class="ui segment teal">
        <form class="ui form">
            <div class="field">
              <label>用户名</label>
              <input type="text" name="username" placeholder="用户名">
            </div>
            <div class="field">
              <label>密码</label>
              <input type="password" name="password" placeholder="密码">
            </div>
            <button class="ui button basic teal" type="submit">登录</button>
            <div class="ui error message"></div>
          </form>
     </div>
   
 </div>
    
    <script src="../../../../../../../Documents/VSCodeDocument/Myblog/static/js/jquery-3.5.1.min.js"></script>
    <script src="../../../../../../../Documents/VSCodeDocument/Myblog/static/semanticUI/semantic.min.js"></script>
    <script>
        $(".ui.form").form({
            fields: {
                username: {
                    identifier: 'username',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入用户名！'
                    }]
                },
                password: {
                    identifier: 'password',
                    rules: [{
                        type: 'empty',
                        prompt: '请输入密码！'
                    }]
                }
            }
        })
    </script>
</body>

</html>